<template>
    <el-popover :width="320" trigger="click">
        <template #reference>
            <el-button>
                <el-icon :size="12" v-if="option.name">
                    <component :is="option.name" />
                </el-icon>
                图标选择器
                <el-icon :size="14">
                    <component :is="'ArrowDown'" />
                </el-icon>
            </el-button>
        </template>
        <div class="box">
            <el-input v-model="option.search" placeholder="请输入图标名称" @input="record(1)" clearable>
                <template #suffix>
                    <el-tooltip :content="props.modelValue ? props.modelValue : '-'">
                        <el-icon :size="14">
                            <component :is="'Info'" />
                        </el-icon>
                    </el-tooltip>
                </template>
            </el-input>
            <el-row :gutter="12">
                <template v-for="item in option.list">
                    <el-col :span="4" @click="select(item.name)">
                        <el-card shadow="hover" style="margin-top: 5px">
                            <el-icon :size="14" v-if="option.show">
                                <component :is="item.name" />
                            </el-icon>
                        </el-card>
                    </el-col>
                </template>
            </el-row>
            <div class="more">
                <div>
                    <el-button icon="Delete" size="small" @click="clear" />
                </div>
                <el-pagination v-model:current-page="option.page.page" v-model:page-size="option.page.size" :total="option.page.total" :page-sizes="option.page.sizes" :pager-count="option.page.count" :small="true" :background="true" @current-change="record(0)" @size-change="record(1)" layout="prev,next" />
            </div>
        </div>
    </el-popover>
</template>
<script setup name="Icons">
    // import icons from '@icon-park/vue-next/icons.json';
    import * as ElIcons  from '@element-plus/icons-vue';
    let icons = []
    for(let name in ElIcons) {
        icons.push({
            name: name
        })
    }
    //接收参数
    const emit = defineEmits(['update:modelValue']);
    const props = defineProps({
        modelValue: { required: true, type: String }
    });

    const option = reactive({
        name: '',
        show: '',
        search: '',
        list: [],
        page: {
            page: 1,
            size: 30,
            total: 0,
            sizes: [30, 60, 90, 150, 300],
            count: 5
        }
    });

    //监听数据
    watch(
        () => props.modelValue,
        () => {
            let clone = props.modelValue + '';
            if (option.name != clone) {
                option.name = null;
                nextTick(() => {
                    option.name = clone;
                });
            }
        },
        { deep: true, immediate: true }
    );

    //匹配数据
    function record(page = 0) {
        option.show = false;
        page == 0 || (option.page.page = page);

        let filter = icons.filter((item) => item.name.indexOf(option.search) > -1);
        option.page.total = filter.length;
        option.list = filter.slice((option.page.page - 1) * option.page.size, option.page.page * option.page.size);

        nextTick(() => (option.show = true));
    }

    //图标选中
    function select(name) {
        option.name = '';
        nextTick(() => {
            option.name = name;
            update();
        });
    }

    //清空选中
    function clear() {
        option.name = '';
        update();
    }

    //数据改变
    function update() {
        let clone = option.name + '';
        emit('update:modelValue', clone);
    }

    onMounted(() => {
        record(0);
    });
</script>
<style scoped lang="scss">
    .icon {
        margin-right: 4px;
    }
    .down {
        margin-left: 2px;
    }
    .el-card:deep() {
         .el-card__body {
            --el-card-padding: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .more {
        margin-top: 14px;
        display: flex;
        justify-content: space-between;
    }
</style>
